<template>
<div class="wd-search">
    <div class="search-content">
        <a-row :gutter="24">
            <template v-for="(item, index) in searchOptions.fieldDataList">
                <a-col class="gutter-row search-model" :span="item.col ? item.col : 5" :key="index" v-if="item.isShow!==false">
                    <div class="search-model-content">
                        <div class="model-label" :style="{ width: item.labelWidth + 'px' }">
                            {{ item.label + "：" }}
                        </div>
                        <div class="model-content">
                             <slot :name="item.template" v-if="item.type==='template'" :obj="item" ></slot>
                            <i-form-item  v-else  :formField="formField" :currentFildData="item" @changeSelectFun="changeSelectFun"></i-form-item>
                        </div>
                    </div>
                </a-col>
            </template>

            <div class="search-operation ">
                <a-button type="primary" @click="searchSubmitFun()" class="search-submit">
                    搜索
                </a-button>
                <a-button type="default" @click="resetSubmitFun()">
                    重置
                </a-button>
            </div>
        </a-row>
    </div>
</div>
</template>

<script lang="ts">
// import { Row, Col, Button } from 'ant-design-vue'
import { defineComponent, PropType, computed } from 'vue'
import { SearchInterFace, SearchFieldListInterFace } from './ISearchInterFace'
import IFormItem from '../../IForm/src/IFormItem.vue'
export default defineComponent({
  name: 'wd-search',
  props: {
    searchOptions: {
      type: Object as PropType < SearchInterFace < any >>,
      required: true
    }
  },
  setup (props, ctx) {
    /**
             计算整合表单数据
            */
    const formField: any = computed(() => {
      return props.searchOptions.form
    })
    const changeSelectFun = (item: SearchFieldListInterFace, data: any) => {
      if (item.callback) {
        item.callback(data, item)
      }
    }
    const searchSubmitFun = () => {
      ctx.emit('searchSubmitFun', formField.value)
    }
    const resetSubmitFun = () => {
      ctx.emit('resetSubmitFun')
    }
    return {
      resetSubmitFun,
      formField,
      changeSelectFun,
      searchSubmitFun
    }
  },
  methods: {},
  components: {
    IFormItem
    // 'a-row': Row,
    // 'a-col': Col,
    // 'a-button': Button
  }
})
</script>
